<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="641" height="512">
    <g v-if="props.state">
      <line fill="none" :stroke="props.strokeColor" x1="878" y1="314" x2="877" y2="314" id="svg_1"  />
      <line fill="none" x1="1" y1="258.5" x2="127" y2="257.5" id="svg_2"   stroke-width="30" :stroke="props.strokeColor"/>
      <line fill="none" x1="118" y1="259" x2="417" y2="133" id="svg_3"   stroke-width="30" :stroke="props.strokeColor"/>
      <line fill="none" :stroke="props.strokeColor" x1="216" y1="328" x2="216" y2="327" id="svg_4"  />
      <line transform="rotate(90 454.646 259.5)" fill="none" :stroke="props.strokeColor" x1="393.14645" y1="259" x2="516.14645" y2="260.00001" id="svg_8"   stroke-width="30"/>
      <line fill="none" x1="469" y1="259" x2="643" y2="260.00001" id="svg_10"   stroke-width="30" :stroke="props.strokeColor"/>
      <ellipse :stroke="props.strokeColor" ry="50" rx="50" id="svg_5" cy="259" cx="389.5" stroke-width="30" fill="none"/>
    </g>
    <g v-else>
      <line :stroke="props.strokeColor" fill="none" x1="1" y1="258.5" x2="349.00001" y2="257.5" id="svg_2" stroke-width="30"/>
      <line fill="none" :stroke="props.strokeColor" x1="216" y1="328" x2="216" y2="327" id="svg_4"/>
      <line transform="rotate(90 454.646 259.5)" fill="none" :stroke="props.strokeColor" x1="393.14645" y1="259" x2="516.14645" y2="260.00001" id="svg_8" stroke-width="30"/>
      <line fill="none" x1="469" y1="259" x2="643" y2="260.00001" id="svg_10" stroke-width="30" :stroke="props.strokeColor"/>
      <ellipse :stroke="props.strokeColor" ry="50" rx="50" id="svg_5" cy="261" cx="406.5" stroke-width="30" fill="none"/>
    </g>
  </svg>
</template>
<script setup lang="ts">
const props = defineProps({
  strokeColor: String,
  state: Boolean,
  text:String
});
</script>